<template>
  <div class="placeholder"></div>
  <div class="nav-bar">
    <div class="nav-inner">
      <div class="logo">
        <img src="../../../assets/logo.png" alt="" />
      </div>

      <div class="nav-main">
        <div class="item" v-for="(item, index) in navItems" :key="index" @click="handleNavItemClick(index)">
          {{item}}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { useRouter } from 'vue-router'
  // 页面数据
  const router = useRouter()
  const perItem = localStorage.getItem('token') ? "后台入口" : "站长登陆"
  const navItems = ["我的项目", "摸鱼时刻", "网络日志", "留言板", perItem]
  // 事件处理
  const handleNavItemClick = (index) => {
    switch(navItems[index]) {
      case "留言板":
        router.push({ path: '/messageboard' })
        break
      case "网络日志":
        router.push({ path: '/weblog' })
        break
      case "摸鱼时刻":
        router.push({ path: '/relax' })
        break
      case "我的项目":
        router.push({ path: '/project' })
        break
      case "站长登陆":
        router.push({ path: '/login' })
        break
      case "后台入口":
        router.push({ path: '/perhome' })
        break
    }
  }
</script>

<style scoped>
.placeholder {
  background-color: #a62507;
  height: 45px;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
}
.nav-bar {
  height: 85px;
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  position: absolute;
  z-index: 1;
}

.nav-inner {
  margin: 0 20px;
  display: flex;
  justify-content: space-between;
}

.logo {
  width: 300px;
  height: 100%;
}

@media screen and (max-width: 884px){
  .logo {
    display: none;
  }
  .nav-main {
    width: 100%;
    justify-content: space-around;
  }
}

.logo img {
  margin-top: 10px;
}

.nav-main {
  align-self: center;
  display: flex;
}

.nav-main .item {
  font-size: 20px;
  color: #eee;
  cursor: pointer;
  margin: 0 16px;
  user-select: none;
}

.nav-main .item:hover {
  color: #fff;
}
</style>
